<template>
  <!-- 记住当前用户最近的30个路由信息 -->
  <div class="rightHistoryList" v-clickOutSide="change" v-if="show" :style="{ right : width + 'px' }">
    <div class="card mb-3" v-for="card in 100">
      <div class="line d-flex ai-center w-100" v-for="(item,i) in showKeys" :key="'key_name'+ i">{{item.name}}：<span class="text-overflow">{{item.key}}</span></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { authModelUse } from "@/store/module/AuthModel";
import { ref, reactive, onMounted, defineProps, watch, defineEmit } from "vue";
import { historyLocal } from "@/config";
import type { historyList } from "@/store/type/interface";
const emit = defineEmit(['update:show'])

const store = authModelUse(useStore());

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
}) 

watch(()=> props.show, (n)=>{
  if(n){ width.value = -300 }
})

let historyLists = reactive([] as historyList[]);

const showKeys = reactive([
  { name: '页面名称', key: 'name' },
  { name: '跳转路径', key: 'path' },
  { name: '隶属目录', key: 'parentName' },
  { name: '携带参数', key: 'querywidjaoijdoiajdoajdoiajwdoijaoidjoiawjdoiawjd'}
])

const sessionItem = ()=>{
  let model = sessionStorage.getItem('historyList')
  if(model){
    return JSON.parse(model)
  }
  return []
}

const width = ref(0);

// 防止用户连续多次点击的时候影响后续代码的进行的 标识符
const time = ref(0 as any);

const change = ()=>{
  if(props.show){
    if(width.value == 0){
      if(time.value){ return false }
      width.value = -300;
      time.value = setTimeout(()=> { emit('update:show', false); time.value = 0; },900);
    }else{
      if(time.value){ return false }
      time.value = setTimeout(()=> { width.value = 0; time.value = 0; }, 100)
    }
  }
}

onMounted(()=>{
  historyLocal ? historyLists = sessionItem() || [] : historyLists = store.state.historyList
})


</script>

<style lang="scss" scoped>
.rightHistoryList{
  position: fixed;
  right: 0px;
  top: 0px;
  height: 100vh;
  overflow-y: auto;
  padding: 10px;
  border-left: 6px double gray;
  box-sizing: border-box;
  width: 300px;
  z-index: 99999;
  background: white;
  transition: all 1s;
  .card{
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100px;
    border-radius: 6px;
    padding: 12px;
    box-sizing: border-box;
    box-shadow: 1px 1px 1px 2px rgba(0,0,0,.3);
    cursor: pointer;
    .line{
      margin-bottom: 3px;
    }
    &:after{
      position: absolute;
      top: -10px;
      left: -10px;
      content: '';
      width: 25px;
      height: 25px;
      background-image: url("@/assets/systemImg/xwjIcon.png");
      background-size: 100% 100%;
      z-index: 9;
    }
  }
}
</style>